<script lang="ts">
export default {
  name: "HomeSidebar",
};
</script>

<script setup lang="ts">
import router from "@/router";

</script>

<template>

  <el-row>
    <el-col :span="12">
      <h4>菜单</h4>
      <el-menu class="el-menu">
        <el-sub-menu index="1">
          <template #title >
            <span id="item_controller">信息管理</span>
          </template>
          <el-menu-item-group class="item-group">
            <el-menu-item index="1-1" @click="router.push('/home/user')" id="user_menu">业主信息</el-menu-item>
            <el-menu-item index="1-2" @click="router.push('/home/house')" id="home_menu">房屋信息</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2" id="activity_menu">
          <template #title>
            <span>活动管理</span>
          </template>
          <el-menu-item-group class="item-group">
            <el-menu-item index="2-1" @click="router.push('/home/event')" id="activity_item">活动信息</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3" id="an_menu">
          <template #title>
            <span>公告, 通知管理</span>
          </template>
          <el-menu-item-group class="item-group">
            <el-menu-item index="3-1" @click="router.push('/home/announcements')" id="an_item">公告</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="4" id="repair_menu">
          <template #title>
            <span>维修管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1" @click="router.push('/home/repairRegistration')" id="repair_item">维修登记</el-menu-item>
            <el-menu-item index="4-1" @click="router.push('/home/repairInfo')">维修记录</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-col>

  </el-row>


</template>

<style scoped>
.el-menu {
  width: 200px;
  border: none;
}

.item-group {
  width: 200px;
  border: none;
  text-align: center;
}

span {
  display: inline-block;
  align-items: center;
}
</style>


<!--
  -->